<template>
  <view class="main-container">
		<!--  头部搜索栏 -->
		<view class="head">
			<view class="search_view">
				<input class="search" v-model="keyword" placeholder="请输入关键字搜索" />
		<!-- 				<button size="mini" @click="searchPolicy()"></button> -->
				<image src="http://113.142.144.25:9301/statics/appimg/icon_search_btn_new.png" 
					style="height: 30rpx;width:30rpx;padding: 20rpx;" @click="searchPolicy()"></image>
			</view>
		</view>
	  
		<!--导航栏-->
		<orderTabBar :tabList="tabList" @clickTabBar="clickTabBar" class="tab-bar" :show-line="true" />
		<!--订单列表-->
		<scroll-view class="policy_list" scroll-y="true" :style="'width:100%;height:fit-content'" enable-flex  @scrolltolower="scrollToLower()">
			<view class="policy_item"  v-for="(item, index) in questionList" :key="item.order_no" @click="policyDetail(item.id)">
				<view>
					<text class="policy_title">{{item.title}}</text>
				</view>
				<view>
					<text class="publicTime">{{item.publishTime}}</text>
				</view>
				<view class="devideline"></view>
			</view>

		    <view class="no-data" v-if="questionList[currentStatus].length == 0">
			    <image src="https://file.genepre.com/wechat/nomsg5_new.png" mode="aspectFit" class="no-data-img"></image>
			   暂无数据
		    </view>
		</scroll-view>
	  </view>
</template>

<script>
	import orderTabBar from '@/wxcomponents/tab_bar.vue';
	import * as question from '@/api/question.js'
	import * as codeList from '@/utils/code.js'
	export default {
	  components: {
		orderTabBar,
	  },
	  data() {
		return {
		  showPage: false,
		  // 订单列表tab项
		  tabList: [{
			status: '0',
			title: '操作问题'
		  },
		  {
		  	status: '1',
		  	title: '流程问题'
		  },
			{
			  status: '2',
			  title: '求职问题'
			},
			{
			  status: '3',
			  title: '政策问题'
			}
		  ],
		  // 当前选择tab项
		  currentIndex: 0,
		  // 当前查询状态
		  currentStatus: '0',
		  // 订单列表高度
		  orderHeight: 0,
		  // 是否还有更多数据
		  noMoreData: {},
		  // 订单列表
		  questionList: [],
		  // 页码数组
		  pageNum: 0,
		  // 每页请求数
		  pageSize: 10,
		  policylevel:''
		}
	  },
	  onShow() {
		// let _this = this
		// _this.getOrderList()
	  },
	  mounted() {
		let _this = this;
		const query = uni.createSelectorQuery().in(this);
		query.select('.tab-bar').boundingClientRect(data => {
		  _this.tabHeight = data.height
		  _this.orderHeight = _this.windowHeight-5
		}).exec();
		this.iniApi()
	  },
	  methods: {
		iniApi() {
		  let _this = this
		  _this.getOrderList()
		},
		// tab切换
		clickTabBar(index, status) {
		  this.currentIndex = index
		  this.currentStatus = status
		  this.questionList = [];
		  this.getOrderList()
		},
		// 加载订单列表
		getOrderList() {
			uni.showLoading({});
			const data = {
				policylevel:this.currentIndex,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				code: "KJZC",
			};
			if(this.currentIndex == 0){
				question.getOprationQuestionList().then((res)=>{
					res.rows.forEach(v => {
						this.questionList.push(v)
					})
					uni.hideLoading({});
				});
			}else if(this.currentIndex == 1){
				question.getLiuchengQuestionList().then((res)=>{
					res.rows.forEach(v => {
						this.questionList.push(v)
					})
					uni.hideLoading({});
				});
			}else if (this.currentIndex == 2){
				question.getJobQuestionList().then((res)=>{
					res.rows.forEach(v => {
						this.questionList.push(v)
					})
					uni.hideLoading({});
				});
			}else{
				question.getPolicyQuestionList().then((res)=>{
					res.rows.forEach(v => {
						this.questionList.push(v)
					})
					uni.hideLoading({});
				});
			}
		},
		// 更新order
		updateOrderInfo(index) {
			let _this = this
			_this.getOrderList()
		},
		// 滑到底部 加载更多
		scrollToLower() {
			if(this.questionList.length>this.pageSize*(this.pageNum+1)){
				this.pageNum = this.pageNum + 1;
				this.getOrderList();
			}else{
				uni.showToast({
					icon:'none',
					title:"没有更多数据"
				})
			}
		},
		policyDetail(id){
			uni.navigateTo({
				url:'/subpages/pages/detail/question_detail?id='+ id
			})
		}
	  },
	  computed: {
			
	  }
	}
</script>

<style>
	
	.head {
		display: flex;
		width: 93vw;
		margin: 20rpx auto;
		height: 70rpx;
		border-radius: 30rpx;
		background-color: #fff;
		text-align: center;
	}
	
	.search_view{
		margin: 0 auto;
	}
	
	.search {
		height: 40rpx;
		padding-top: 15rpx;
		font-size: 25rpx;
		float: left;
	}
	
	.main-container {
	  width: 100vw;
	  height: 100vh;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-start;
	  align-items: center;
	  background-color: #e6e6e6;
	}

	.main-container .tab-bar {
	  width: 100%;
	}

	.main-container .order-lists {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-start;
	  align-items: center;
	}
	
	.no-data {
	  width: 100%;
	  height: 300rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  font-size: 32rpx;
	  margin-top: 100rpx;
	}
	
	.no-data .no-data-img {
	  width: 300rpx;
	  height: 268rpx;
	}
	
	.policy_list {
		width: 95%;
		margin: 20rpx auto;
		height: 660rpx;
		background-color: #fff;
	}
	
	.policy_item {
		margin-left: 20rpx;
		padding: 20rpx;
		background-color: #fff;
	}
	
	.policy_title {
		display: -webkit-box;
		width: 650rpx;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-box-orient: vertical; /*排列方式*/ 
		-webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
	}
	
	.publicTime {
		float:left;
		font-size: 26rpx;
		color: #a1a1a1;
		margin-top: 15rpx;
	}
	
	.devideline {
		float: left; 
		height: 0.3rpx;
		width:100%;
		background-color: #eeeeee;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
</style>